<template>
  <div class="w-full h-full flex flex-col justify-start items-center main">
    <h3 class="text-2xl font-bold mt-8">{{ $t("aboutTravelAi.advantage") }}</h3>
    <div class="w-[100%] h-[100%] flex justify-center items-center content">
      <img
        src="../../../assets/images/aboutTravelAI/Advantage/smallBg.png"
        alt=""
        class="smallBg"
      />
      <p class="plain">{{ $t("aboutTravelAi.plain") }}</p>
      <p class="resource">{{ $t("aboutTravelAi.resource") }}</p>
      <p class="static">{{ $t("aboutTravelAi.static") }}</p>
      <p class="coverage">{{ $t("aboutTravelAi.coverage") }}</p>
      <p class="cache">{{ $t("aboutTravelAi.cache") }}</p>
      <p class="automated">{{ $t("aboutTravelAi.automated") }}</p>
    </div>
  </div>
</template>
<script setup></script>
<style lang="scss" scoped>
.main {
  height: 600px;
  width: 100%;
  background: url("@/assets/images/aboutTravelAI/Advantage/bg.png") no-repeat;
  background-size: cover;
  background-position: center center;
}
.content {
  position: relative;
  .smallBg {
    position: absolute;
    top: 30%;
    width: 260px;
    height: 220px;
  }
  p {
    position: absolute;
    width: 300px;
    min-height: 60px;
    background: #fff;
    border-radius: 15px;
    display: flex;
    justify-content: start;
    align-items: center;
    padding: 1%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    font-weight: 400;
    color: #333;
  }
  @media screen and (min-width: 1440px) {
    background: url("@/assets/images/aboutTravelAI/Advantage/1.png"),
      url("@/assets/images/aboutTravelAI/Advantage/2.png"),
      url("@/assets/images/aboutTravelAI/Advantage/3.png"),
      url("@/assets/images/aboutTravelAI/Advantage/4.png"),
      url("@/assets/images/aboutTravelAI/Advantage/5.png"),
      url("@/assets/images/aboutTravelAI/Advantage/6.png");
    background-repeat: no-repeat, no-repeat;
    background-size: 3% 11%;
    background-position: 40% 21%, 60% 19%, 63.5% 50%, 61% 86%, 39% 86%,
      36.5% 50%;
  }
  @media screen and (max-width: 1440px) {
    background: url("@/assets/images/aboutTravelAI/Advantage/1.png"),
      url("@/assets/images/aboutTravelAI/Advantage/2.png"),
      url("@/assets/images/aboutTravelAI/Advantage/3.png"),
      url("@/assets/images/aboutTravelAI/Advantage/4.png"),
      url("@/assets/images/aboutTravelAI/Advantage/5.png"),
      url("@/assets/images/aboutTravelAI/Advantage/6.png");
    background-repeat: no-repeat, no-repeat;
    background-size: 4% 11%;
    background-position: 42% 20%, 58% 20%, 64% 50%, 58% 84%, 42% 84%, 36% 50%;
  }
  .plain {
    top: 22%;
    left: 71%;
  }
  .resource {
    top: 49%;
    left: 76%;
  }
  .static {
    top: 80%;
    left: 71%;
  }
  .coverage {
    top: 80%;
    left: 29%;
  }
  .cache {
    top: 50%;
    left: 24%;
  }
  .automated {
    top: 22%;
    left: 29%;
  }
}
</style>
